テーマを使用して色とフォントスタイルを共有する

コンテンツ

アプリ全体で色とフォントスタイルを共有するには、テーマを使用します。アプリ全体のテーマを定義するか、次のいずれかを使用できます。Themeウィジェット特定のパーツの色とフォントスタイルを定義します。アプリケーションの。実際には、アプリ全体のテーマはThemeで作成されたウィジェットによるアプリのルートMaterialApp。

テーマを定義したら、それを独自のウィジェット内で使用します。 flutterズマテリアルウィジェットもテーマを使用して背景を設定しますアプリバー、ボタン、チェックボックスなどの色とフォントスタイル。

アプリのテーマを作成する

アプリ全体でテーマを共有するには、ThemeDataにMaterialAppコンストラクタ。

いいえの場合themeが提供されている場合、Flutter はデフォルトのテーマを作成します。

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      displayLarge: TextStyle(fontSize: 72, fontWeight: FontWeight.bold),
      titleLarge: TextStyle(fontSize: 36, fontStyle: FontStyle.italic),
      bodyMedium: TextStyle(fontSize: 14, fontFamily: 'Hind'),
    ),
  ),
  home: const MyHomePage(
    title: appName,
  ),
);

を参照してください。ThemeDataすべてを見るためのドキュメント定義できる色とフォント。

アプリケーションの一部のテーマ

アプリケーションの一部でアプリケーション全体のテーマをオーバーライドするには、アプリのセクションをラップするThemeウィジェット。

これにアプローチするには 2 つの方法があります。ThemeData、または親テーマを拡張します。

ユニークなものを生み出す`ThemeData`

アプリケーションの色やフォントスタイルを継承したくない場合は、を作成しますThemeData()インスタンスを作成し、それをThemeウィジェット。

Theme(
  // Create a unique theme with `ThemeData`
  data: ThemeData(
    splashColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
);

親テーマの拡張

すべてをオーバーライドするよりも、多くの場合、親を拡張する方が合理的です。テーマ。これは、次を使用して処理できます。copyWith()方法。

Theme(
  // Find and extend the parent theme using `copyWith`. See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(splashColor: Colors.yellow),
  child: const FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

テーマの使用

テーマを定義したので、それをウィジェット内で使用します。build()を使用したメソッドTheme.of(context)方法。

のTheme.of(context)メソッドはウィジェットツリーを検索して返します。一番近いTheme木の中。スタンドアロンをお持ちの場合Themeウィジェットの上に定義すると、それが返されます。そうでない場合は、アプリのテーマが返されます。

実際、FloatingActionButtonこのテクニックを使用して、accentColor。

Container(
  color: Theme.of(context).colorScheme.secondary,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.titleLarge,
  ),
),

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        // Define the default brightness and colors.
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],

        // Define the default font family.
        fontFamily: 'Georgia',

        // Define the default `TextTheme`. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: const TextTheme(
          displayLarge: TextStyle(fontSize: 72, fontWeight: FontWeight.bold),
          titleLarge: TextStyle(fontSize: 36, fontStyle: FontStyle.italic),
          bodyMedium: TextStyle(fontSize: 14, fontFamily: 'Hind'),
        ),
      ),
      home: const MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).colorScheme.secondary,
          child: Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.titleLarge,
          ),
        ),
      ),
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(splashColor: Colors.yellow),
        child: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}